<script setup>
import {onMounted, ref} from "vue"
import { useRoute, useRouter } from 'vue-router';
import Loading from '../components/Loading.vue';
import useLoadData from '../hooks/useLoadData';
import { getMemberList, getPermission, manager, removeMember, updateMember } from '../api/member';
import { Dialog } from "vant";
//初始化
const route = useRoute()
const router = useRouter()
const { isError, isLoading, data } = useLoadData(
    getMemberList(route.params.pid)
)
const currentMember = ref({})
//控制抽屉
const show = ref(false)
const memberHandle = (item)=>{
    show.value = !show.value
    currentMember.value=item
}
//控制滑块
const switchHandle = ()=>{
    if(currentMember.value.is_manager != 2){
        currentMember.value.is_manager = currentMember.value.is_manager>0 ? 0:1
    }
}
//是否是管理员
const isManager = ref(-1)
onMounted(()=>{
    getPermission(route.params.pid).then(res=>{
        if(res.code = 200 && res){
            isManager.value = res.data
        }
    })
})
//保存修改
const update = ()=>{
    updateMember(currentMember.value)
}
//移出
const remove = ()=>{
    Dialog.confirm({
        title:"移出成员",
        message:
            '确认将成员移出项目？'
    }).then(res=>{
        removeMember(currentMember.value)
    })
}
</script>

<template>
    <Loading class="manage-container" :is-error="isError" :is-loading="isLoading">
        <van-cell-group>
            <van-cell
                v-for="item, inde in data"
                :title="item.name"
                @click="memberHandle(item)"
                is-link
            />
        </van-cell-group>
        <van-action-sheet v-model:show="show" title="标题">
            <van-form>
                <van-field name="switch" label="管理员" v-if="isManager==2">
                <template #input>
                    <van-switch  size="20" :model-value="currentMember.is_manager > 0" @update:model-value="switchHandle"/>
                </template>
                </van-field>
                <van-field name="switch" label="职位" v-model="currentMember.position"/>
                
            </van-form>
            <div style="padding:10px">
                <van-button color="var(--main-color)" round block size="small" type="primary" @click="update">
                    确认修改
                </van-button>
                <div style="height: 10px;"></div>
                <van-button round block size="small" type="danger" @click.prevent="remove">
                    移出项目
                </van-button>
            </div>
        </van-action-sheet>
    </Loading>
</template>

<style scoped>
.manage-container {
    position: relative;
}

</style>